<template>
  <basic-dialog
    width="40%"
    top="15%"
    title="选择需要导出的页数"
    :visible.sync="visible"
    :handleClose="handleClose"
    :handleOk="handleExport"
    :okText="'导出'"
    :loadingBtn="exportLoading"
  >
    <el-pagination
      background
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      :current-page="currentPage"
      :page-sizes="[5000]"
      :page-size="pageSize"
      layout="prev, pager, next, sizes, total"
      :total='total'
    />
  </basic-dialog>
</template>
<script>
import BasicDialog from '@/components/BasicDialog';
import { createExcelByExport } from '@/utils/bizUtils';

export default {
  components: { BasicDialog },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    total: {
      type: Number,
    },
    exportInfo: {
      type: Object
    }
  },
  data () {
    return {
      exportLoading: false,
      currentPage: 1,
      pageSize: 5000,
    }
  },
  methods: {
    handleClose () {
      this.$emit('update:visible', false)
    },
    async handleExport () {
      const { service, excelTitle, params } = this.exportInfo;
      const res = await service(
        { ...params, size: this.pageSize, current: this.currentPage },
        state => { this.exportLoading = state }
      )
      if (res) {
        createExcelByExport({ excelTitle, res })
      }
    },
    handleCurrentChange (val) {
      this.currentPage = val
    },
    handleSizeChange (val) {
      this.pageSize = val
    }
  }
}
</script>
